<template>
	<view class="list_wrap">
		<view class="title">{{title}}</view>
		<view class="list">
			<view class="list_one" v-for="item in list" @click="turnInfo(item.ID,item._id)">
				<!-- uniapp如何处理兼容性问题
				  1. 兼容性写法的判断条件编译
				  注释条件编译  APP-PLUS  安卓 ios等
					H5 网页端  MP-WEIXIN 小程序
				 -->
	
				 <!-- #ifdef APP-PLUS -->  
						<image  :lazy-load="true" :src="'http://127.0.0.1:3000'+item.Cpic" > </image>
				 <!-- #endif -->  
				 
				<!-- #ifdef H5 -->  
							<!-- v-lazy="'http://127.0.0.1:3000'+item.Cpic" -->
						<img  :src="'http://127.0.0.1:3000'+item.Cpic" alt="">
				<!-- #endif -->  
				
				<!-- #ifdef MP-WEIXIN  -->
				  	<image  :lazy-load="true" :src="'http://127.0.0.1:3000'+item.Cpic" > < 
				<!-- #endif -->  
				
				
				<view>
					{{item.Cname}}
				</view>
				<view>
					{{item.Cdescribe}}
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			title:{ //标题
				type:String,
				default:"榜单"
			},
			list:{ //列表
				type:Array,
				default(){
					return []
				}
			}
		},
		methods:{
			turnInfo(ID,_id){
				uni.navigateTo({ //跳转课程详情并传参
					url:"/pages/learn/index?ID="+ID+"&_id="+_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.list_wrap{
		margin-top: 20px;
		.title{
			height: 80px;
			line-height: 80px;
			border-bottom: 1px solid black;
			font-weight: bold;
			padding-left: 20px;
			box-sizing: border-box;
		}
		.list{
				font-size: 20px;
				width: 100vw;
				display: flex;
				justify-content: space-between;
				padding: 0 15px ;
				box-sizing: border-box;
				flex-wrap: wrap;
				.list_one{
					width: 45vw;
					height: 320px;
					image{
						width: 100%;
						height: 180px;
					}
					img{
						width: 100%;
						height: 180px;
					}
					view{
						margin-top: 20px;
						
					}
				}
			}
			
	}
</style>